<template>
    <view class="container">
    <view class="tit">
        美国感染新冠病毒激增,华盛顿恢复“室内戴口罩令”
    </view>
    <view class="secheader">
        VOA常速听力  2021-08-21
    </view>
    <view @tap="playaudio" class="void">
        <span>
            <img src="../../../static/声音.png"  alt="占位符" srcset="">
            <!-- <svg t="1639646064920" class="icon" viewBox="0 0 1371 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" data-spm-anchor-id="a313x.7781069.0.i1" width="32" height="32"><path d="M992.77373505 146.68055725c14.91099745 0 26.30612479 5.99882975 34.27807913 18.00973044 35.13883873 51.30124762 61.82237342 106.44280539 80.03074153 165.43129533 18.20836738 58.99511054 27.31255143 119.60579977 27.31255071 181.8519324 0 62.25275322-9.10418406 122.8501998-27.31255071 181.83868901-18.20836738 58.98186789-44.89190207 114.14328963-80.03074153 165.45115931-7.74683282 12.00428009-19.17506606 17.96338187-34.27807913 17.96338186-11.20311172 0-20.8568573-3.86017411-28.91488746-11.58052161-8.05803016-7.72696883-12.12346182-17.54624472-12.12346256-29.56376746 0-8.61421302 2.37039849-16.33456125 7.08471089-23.1742859 61.90844924-90.33998773 92.82956794-190.63829706 92.82956794-300.96114053a533.7832585 533.7832585 0 0 0-23.5848017-157.71756843 528.27439979 528.27439979 0 0 0-69.17193308-143.21708679c-4.76066024-6.84634598-7.13105872-14.57993613-7.13105873-23.18752854 0-11.98441611 4.03894707-21.86328322 12.12346183-29.58363073 8.09775741-7.73359015 17.72501841-11.58714294 28.95461542-11.58714294l-0.06621255 0.02648458z m-123.81689921 112.97133341c15.52677155 0 27.37214193 6.75364882 35.56921854 20.26094647 21.32696435 35.42355149 37.14506997 71.99257463 47.52715005 109.7600393 11.19649039 40.32325745 16.81791023 81.09675795 16.81791024 122.29401766 0 41.0118647-5.62141984 81.87144174-16.81791024 122.6648055-10.55423172 38.17798049-26.37895867 74.78011027-47.52715005 109.71369073-7.95871169 13.32852469-19.83718872 19.98947708-35.5625972 19.9894771-10.79259589 0-20.39337158-3.87341604-28.7625991-11.58714295-8.42881873-7.74021149-12.61343286-17.59921462-12.61343284-29.61673736 0-7.51508995 2.07244308-14.59980011 6.13125412-21.27399445a356.02986441 356.02986441 0 0 0 38.48255651-89.45936487c9.28957834-32.20563607 13.92443552-65.68916886 13.92443551-100.42411237 0-34.55617057-4.63485718-67.91390031-13.92443551-100.11291504a361.96248159 361.96248159 0 0 0-38.48255651-89.78380486 37.48275191 37.48275191 0 0 1-6.13125412-20.92306986c0-11.61362753 4.25082594-21.41966149 12.73261458-29.44458574 8.51489456-8.0447875 18.07594299-12.07049265 28.64341736-12.08373457v0.02648531zM742.55103868 374.57648468c7.95871169 0 15.44731705 2.2379741 22.48567864 6.75364882a41.08469857 41.08469857 0 0 1 15.64595328 18.35403443c15.08977042 36.25782578 22.64458762 73.68098648 22.64458761 112.31583207 0 39.26386163-7.5548172 76.49500742-22.64458761 111.71330064a40.09151459 40.09151459 0 0 1-15.34137727 18.48645882 40.57486429 40.57486429 0 0 1-22.79025465 6.91917984c-10.13047324 0-19.5922032-3.80058289-28.27925011-11.40174865-8.69366751-7.64751435-13.06367591-17.55948738-13.09678256-29.82861698 0-4.92619127 1.05277449-10.26951895 3.24440003-16.06971174C715.17227469 566.49929908 720.568573 539.89521888 720.568573 512c0-27.68996133-5.39629831-54.39998062-16.15578757-80.14992326-2.19162552-4.94605453-3.24440003-10.30262559-3.24440001-16.09619635 0-12.2492656 4.1581288-22.16785997 12.46114447-29.79551104 8.30301567-7.61440843 17.93027595-11.40836998 28.91488746-11.40836925v0.02648458zM472.27265265 683.88698874V338.55702308L382.38952932 429.6253453H265.35938559c-11.21635437 0-20.9098272 4.23096268-29.12014502 12.69950867-8.21031854 8.46192466-12.27575018 18.48645881-12.27575018 30.10670839v80.79880254c0 11.36864273 4.03894707 21.05549423 12.12346183 29.14000971 8.08451547 8.03816691 17.8375788 12.07711325 29.27243338 12.07711326h117.03676505l89.88974466 89.43288026z m-124.1479598-336.66278274L555.04458052 141.21142578v741.57714844L348.12469286 676.79565726h-82.76530726c-34.27145853 0-63.54389191-12.07711325-87.79743689-36.21809783C153.32826701 616.41008956 141.21142578 587.31642914 141.21142578 553.20388032V472.40507705c0-34.14565475 12.11684122-63.51740732 36.35052293-88.19471077 24.25354569-24.68392478 53.52597908-37.01264487 87.79743689-37.01264487h82.76530725v0.01986327z" p-id="2906" fill="#576B95"></path></svg> -->
           <!-- <svg t="1639646064920" class="icon" viewBox="0 0 1371 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2905" data-spm-anchor-id="a313x.7781069.0.i1" width="42.84375" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs></defs><path d="M992.77373505 146.68055725c14.91099745 0 26.30612479 5.99882975 34.27807913 18.00973044 35.13883873 51.30124762 61.82237342 106.44280539 80.03074153 165.43129533 18.20836738 58.99511054 27.31255143 119.60579977 27.31255071 181.8519324 0 62.25275322-9.10418406 122.8501998-27.31255071 181.83868901-18.20836738 58.98186789-44.89190207 114.14328963-80.03074153 165.45115931-7.74683282 12.00428009-19.17506606 17.96338187-34.27807913 17.96338186-11.20311172 0-20.8568573-3.86017411-28.91488746-11.58052161-8.05803016-7.72696883-12.12346182-17.54624472-12.12346256-29.56376746 0-8.61421302 2.37039849-16.33456125 7.08471089-23.1742859 61.90844924-90.33998773 92.82956794-190.63829706 92.82956794-300.96114053a533.7832585 533.7832585 0 0 0-23.5848017-157.71756843 528.27439979 528.27439979 0 0 0-69.17193308-143.21708679c-4.76066024-6.84634598-7.13105872-14.57993613-7.13105873-23.18752854 0-11.98441611 4.03894707-21.86328322 12.12346183-29.58363073 8.09775741-7.73359015 17.72501841-11.58714294 28.95461542-11.58714294l-0.06621255 0.02648458z m-123.81689921 112.97133341c15.52677155 0 27.37214193 6.75364882 35.56921854 20.26094647 21.32696435 35.42355149 37.14506997 71.99257463 47.52715005 109.7600393 11.19649039 40.32325745 16.81791023 81.09675795 16.81791024 122.29401766 0 41.0118647-5.62141984 81.87144174-16.81791024 122.6648055-10.55423172 38.17798049-26.37895867 74.78011027-47.52715005 109.71369073-7.95871169 13.32852469-19.83718872 19.98947708-35.5625972 19.9894771-10.79259589 0-20.39337158-3.87341604-28.7625991-11.58714295-8.42881873-7.74021149-12.61343286-17.59921462-12.61343284-29.61673736 0-7.51508995 2.07244308-14.59980011 6.13125412-21.27399445a356.02986441 356.02986441 0 0 0 38.48255651-89.45936487c9.28957834-32.20563607 13.92443552-65.68916886 13.92443551-100.42411237 0-34.55617057-4.63485718-67.91390031-13.92443551-100.11291504a361.96248159 361.96248159 0 0 0-38.48255651-89.78380486 37.48275191 37.48275191 0 0 1-6.13125412-20.92306986c0-11.61362753 4.25082594-21.41966149 12.73261458-29.44458574 8.51489456-8.0447875 18.07594299-12.07049265 28.64341736-12.08373457v0.02648531zM742.55103868 374.57648468c7.95871169 0 15.44731705 2.2379741 22.48567864 6.75364882a41.08469857 41.08469857 0 0 1 15.64595328 18.35403443c15.08977042 36.25782578 22.64458762 73.68098648 22.64458761 112.31583207 0 39.26386163-7.5548172 76.49500742-22.64458761 111.71330064a40.09151459 40.09151459 0 0 1-15.34137727 18.48645882 40.57486429 40.57486429 0 0 1-22.79025465 6.91917984c-10.13047324 0-19.5922032-3.80058289-28.27925011-11.40174865-8.69366751-7.64751435-13.06367591-17.55948738-13.09678256-29.82861698 0-4.92619127 1.05277449-10.26951895 3.24440003-16.06971174C715.17227469 566.49929908 720.568573 539.89521888 720.568573 512c0-27.68996133-5.39629831-54.39998062-16.15578757-80.14992326-2.19162552-4.94605453-3.24440003-10.30262559-3.24440001-16.09619635 0-12.2492656 4.1581288-22.16785997 12.46114447-29.79551104 8.30301567-7.61440843 17.93027595-11.40836998 28.91488746-11.40836925v0.02648458zM472.27265265 683.88698874V338.55702308L382.38952932 429.6253453H265.35938559c-11.21635437 0-20.9098272 4.23096268-29.12014502 12.69950867-8.21031854 8.46192466-12.27575018 18.48645881-12.27575018 30.10670839v80.79880254c0 11.36864273 4.03894707 21.05549423 12.12346183 29.14000971 8.08451547 8.03816691 17.8375788 12.07711325 29.27243338 12.07711326h117.03676505l89.88974466 89.43288026z m-124.1479598-336.66278274L555.04458052 141.21142578v741.57714844L348.12469286 676.79565726h-82.76530726c-34.27145853 0-63.54389191-12.07711325-87.79743689-36.21809783C153.32826701 616.41008956 141.21142578 587.31642914 141.21142578 553.20388032V472.40507705c0-34.14565475 12.11684122-63.51740732 36.35052293-88.19471077 24.25354569-24.68392478 53.52597908-37.01264487 87.79743689-37.01264487h82.76530725v0.01986327z" p-id="2906" fill="#576B95"></path></svg> -->
        </span>
        <span>
            <!-- 05:17 -->
            {{audioTime}}
        </span>
    </view>
    <view @tap="gomaintext" class="textcontent">
       <view class="text">This is vOA News. Reporting by remote, I'm DavidByrd.President Joe Biden is ordering tough newvaccination rules for fe...</view>
       <!-- <view class="img"><img src="../../../static/main.png"  alt="占位符" srcset=""></view> -->
       <view class="img"><img :src="details.imageUrl"  alt="占位符" srcset=""></view>
    </view>
    <view class="footer">
        <view class="fotitem">
            <span class="left">{{heardNum}}人</span><span>听过</span>
        </view>
        <view  class="fotitem">
            <span @tap="giveThumbsup(true)" v-if="!thg" class="text" ><img   src="../../../static/未点赞.png"  alt="占位符" srcset=""></span>
            <span v-else @tap="giveThumbsup(false)" class="text" ><img   src="../../../static/点赞.png"  alt="占位符" srcset=""></span>
            <span class="img">{{likeNum}}</span>
        </view>
    </view>
    <view class="linebar">
    </view>
    </view>
</template>
<script>
export default {
        name:"miantext",
    	data() {
			return {
				thg:true,
                likeNum:0,
                heardNum:0,
                audioTime:0
			}
		},
        props:["details"],
		// onLoad() {
        //     this.getthg()
        //     console.log(1);
		// },
        mounted() {
            this.getthg()
            console.log(this.details.likeNum,1111);
            this.likeNum =this.details.likeNum
            this.heardNum = this.details.heardNum
            console.log(this.likeNum,2222);
            this.audioTime = JSON.parse(JSON.stringify(this.details)).audioTime
                               console.log("this.audioTime", this.audioTime);

            	let item =  this.audioTime
				if(item == 0){
						 this.audioTime = item+"分钟";
					}else if(item < 60){
						 this.audioTime = item+"秒";
					}else if(item < 3600){
						let m = parseInt(item/60);
						let s = item%60
						 this.audioTime = m+"分钟"+s+"秒";
					}else{
						let h = parseInt(item/3600);
						let remainder = item%3600;
						let m = parseInt(remainder/60);
						if(remainder == 0){
							let s = remainder%60;
							 this.audioTime = h+"小时"+m+"分钟"+s+"秒";
						}else{
							 this.audioTime = h+"小时"+m+"分钟";
						}
					}
                    console.log("this.audioTime", this.audioTime);
		},
		methods: {
            	gomaintext(){
				uni.navigateTo({
					url:"/pages/index/maintextdetails?addr="+JSON.stringify(this.details)
				})
			},
                giveThumbsup(istrue){
                    let tag = ""
                    console.log(this.thg);
                    this.thg = !this.thg
                    if(this.thg) tag = 1
                    if(!this.thg) tag = 0
                    uni.request({
                      url: 'http://139.9.151.197:8889/app/home/like/'+this.details.id+"?tag="+tag,
                      complete: (res) => {},
                      data: {},
                      fail: (res) => {},
                      method: "GET",
                      success: (result) => {
                          console.log("result",result);
                        //   uni.setStorage({
                        //       key:String(this.details.id ),
                        //       data: istrue ,
                        //       success: function (res) {
                        //           console.log('success',res);
                        //       },
                        //       fail:function (res) {
                        //           console.log('filed',res);
                        //       },
                        //   });
                         if(this.thg) this.likeNum++
                         if(!this.thg) this.likeNum--
                        console.log(String(this.details.id),istrue);
                        uni.setStorageSync(String(this.details.id),String(istrue))
                        wx.setStorageSync(String(this.details.id),istrue)
                      },
                    })
                },
               async playaudio(){
                   console.log(this.details);
                   await uni.$emit("createInnerAudioContext_destroy")
                   await uni.$emit("createInnerAudioContext")
                   await uni.$emit("InnerAudioContext_init",{src:this.details.audioUrl,autoplay:true})
                //    await uni.$emit("innerAudioContext_seek")
                   console.log("in");
                },
                getthg(){
                    this.thg = uni.getStorageSync(this.details.id);
                    if(this.thg == undefined) this.thg = false
                    console.log("this.thg",this.thg);
                },
                heardNumAdd(){
                    this.heardNum++
                    console.log("ttin",this.heardNum);
                }
		}
}
</script>
<style lang="scss" scoped>
    .container{
        width:100%;
        box-sizing: border-box;
        // background: white;
        & .tit{
            font-size:18px;
            color:black;
            // height:40px;
            text-align: left;
            line-height:1.8;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            padding:0px 3%;

        }
        & .secheader{
            font-size: 12px;
            color: grey;
             text-align: left;
            line-height:1.8;
            padding:0px 3%;

        }
        & .textcontent{
            box-sizing: border-box;
            font-size: 14px;
            text-align: left;
            line-height:1.5;
            display: flex;
            word-break: break-all;
            // text-indent: 2;  
            padding: 0px 2px;
            // text-indent: 2em;
            max-height:120px;
            padding:0px 3%;

            & .text{
                // flex:1;
            box-sizing: border-box;
            padding: 0px 2px;
            display: flex;
            justify-content: center;
            align-items:center
            }
            & .img{
                // flex:1
                width:80%;
                 display: flex;
                justify-content: center;
                align-items:center;
                margin-left:5px;
                & img{
                    width:190%;
                    height:60px
                }
            }

        }

    }
    .footer{
        height:25px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top:1px solid #EEEEEE;
        width:100%;
        & .fotitem{
            height:18px;
            text-align: center;
            // border-right:1px solid #EEEEEE;
            width:45%;
            height:20px;
            display:flex;
            align-items: center;
            justify-content: center;
            & .left{
                padding-right:3px;
            }
            & img{
              height:16px;
              width: 16px;  
              margin-left:3px;
            }
        }
    }
    .linebar{
        background: #EEEEEE;
        width:110%;
        height:10px;
    }
    .void{
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 14px;
        padding:0px 3%;
    }
    .void img{
        width:16px;
        height:16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>